<template>
  <div>
    <el-container class="nav">
      <!-------------------  头部   ----------------------->
      <el-header class="header">
        <div :class="{ headLogo: isCollapse, headLogo2: !isCollapse }">
          <!-- <img src="../assets/logo.png" @click="collapseCli">
                <span v-if="!isCollapse">后台管理系统</span> -->
          <img src="../assets/logo.png" alt="" class="head-logo" />
          <h4>㤫原创管理系统</h4>
        </div>
        <div class="head-home" :class="{ headerHome: isCollapse }">
          <i class="el-icon-s-fold" @click="collapseCli"></i>
          <router-link class="home-link" to="home">首页</router-link>
        </div>
        <el-dropdown>
          <span class="el-dropdown-link">
            <img src="../assets/logo.png" /><i
              class="el-icon-arrow-down el-icon--right"
            ></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <!--  <el-dropdown-item>个人中心</el-dropdown-item> -->
            <!--       <router-link  to="setting" class="settag"> <el-dropdown-item >设置</el-dropdown-item></router-link>  -->
            <el-dropdown-item @click.native="logOut">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

        <!-- <el-button type="info" disabled>退出</el-button> -->
      </el-header>
      <!-------------------  页面主体部分   ----------------------->
      <el-container>
        <!-------------------  左侧导航栏   ----------------------->
        <el-aside :width="isCollapse ? '64px' : '200px'">
          <el-menu
            class="el-menu-vertical-demo"
            background-color="#304156"
            text-color="#fff"
            active-text-color="#1890ff"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
            :collapse-transition="false"
            :unique-opened="isUnique"
            router
            :default-active="activePath"
          >
          <!-- 头像 -->
            <div class="avator">
                <el-avatar class="avator-icon" icon="el-icon-user-solid" ></el-avatar>
              <div class="username" v-show="!isCollapse">{{ admin_name }}</div>
            </div>
            <!-- 一级菜单 -->
            <el-submenu
              :index="itemP.id + ''"
              v-for="(itemP, indexP) of menuList"
              :key="indexP"
            >
              <!-- 一级菜单模板区 -->
              <template slot="title">
                <!-- 图标 -->
                <i :class="iconObj[itemP.id]"></i>
                <!-- 文本 -->
                <span>{{ itemP.authName }}</span>
              </template>
              <!-- 二级级菜单模板区 -->
              <el-menu-item
                :index="'/' + itemC.path"
                @click="saveNavPath('/' + itemC.path)"
                v-for="(itemC, indexC) of itemP.children"
                :key="indexC"
              >
                <template slot="title">
                  <!-- 图标 -->
                  <i class="el-icon-menu"></i>
                  <!-- 文本 -->
                  <span>{{ itemC.authName }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-------------------  右侧页面内容   ----------------------->
        <el-main
          :class="{ collMainCollF: !isCollapse, collMainCollT: isCollapse }"
        >
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      //侧边栏折叠状态
      isCollapse: false,
      admin_name :'',
      //侧边栏数据
      menuList: [
        {
          id: 1,
          authName: "用户管理",
          children: [{ id: 101, authName: "用户列表", path: "users" }]
        },
        {
          id: 2,
          authName: "账号管理",
          children: [{ id: 201, authName: "角色列表", path: "rights" }]
        },
        {
          id: 3,
          authName: "商品管理",
          children: [
            { id: 301, authName: "商品分类", path: "goods" },
            { id: 302, authName: "商品列表", path: "categories" }
          ]
        },
        {
          id: 4,
          authName: "订单管理",
          children: [{ id: 401, authName: "订单列表", path: "orders" }]
        },
        {
          id: 5,
          authName: "上传管理",
          children: [
            { id: 501, authName: "作品列表", path: "works" },
            { id: 501, authName: "联名", path: "jointly" },
            { id: 501, authName: "合作列表", path: "cooperation" },
            { id: 501, authName: "视频列表", path: "video" },
            { id: 501, authName: "故事列表", path: "story" }
          ]
        },
        {
          id: 6,
          authName: "Banner管理",
          children: [{ id: 401, authName: "首页轮播", path: "sliders" }]
        },
        {
          id: 7,
          authName: "数据统计",
          children: [{ id: 401, authName: "数据报表", path: "reports" }]
        }
      ],

      //字体图标
      iconObj: {
        1: "iconfont iconusers",
        2: "iconfont icontijikongjian",
        3: "iconfont iconshangpin",
        4: "iconfont icondanju",
        5: "iconfont iconwulumuqishigongandashujuguanlipingtai-ico-",
        6: "iconfont iconduotulunbo",
        7: "iconfont icondanju"
      },

      //当前菜单激活的index
      activePath: "",

      //子菜单展示状态
      isUnique: true
    };
  },
  created() {
    this.activePath = window.sessionStorage.getItem("activePath");
  },
  methods: {
    //侧边栏折叠事件
    collapseCli() {
      this.isCollapse = !this.isCollapse;
    },
    //退出登录
    logOut() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },

    //监听侧边栏展开的状态
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    saveNavPath(path) {
      this.isUnique = true;
      window.sessionStorage.setItem("activePath", path);
      this.activePath = path;
    }
  },
  mounted(){
    this.admin_name=sessionStorage.getItem("user")
  }
};
</script>

<style lang="less">
.head-logo {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-right: 10px;
}

.el-aside {
  position: fixed;
  left: 0;

  span {
    font-size: 13px;
  }
}
.avator {
  height: 75px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  color:#fff ;
  .avator-icon{
    font-size:20px ;
  }
   .username{
     padding: 0 10px;
   }
}

.el-aside .el-menu--inline {
  // background-color:#2c3b42 !important;
  background-color: #000 !important;
}
.iconfont {
  margin-right: 10px;
}
.el-menu {
  border-right: none;
}
.headLogo2 {
  width: 200px;
  position: fixed;
  left: 0;
  top: 0;
}
.settag {
  text-decoration: none;
}
.head-home {
  margin-left: 200px;
  position: absolute;
  left: 0;
  top: 16px;
  font-size: 13px;
  // color: #fff;
  display: flex;
  align-items: center;

  :first-child {
    margin-left: 20px;
    font-size: 20px;
  }
  :last-child {
    margin-left: 10px;
  }
}
.head-home:hover {
  cursor: pointer;
}

.headLogo {
  width: 64px;
  position: fixed;
  top: 0;

  h4 {
    // font-size: 12px;
    display: none;
  }
}
.home-link {
  color: black;
  text-decoration: none;
  font-weight: 600;
}
.headLogo,
.headLogo2 {
  height: 50px;
  background: #2b2f3a;
  color: #fff;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;

  h4 {
    margin: 0;
  }
}
.collMainCollT {
  margin-left: 65px;
  padding: 0;
}
.collMainCollF {
  margin-left: 200px;
  padding: 0;
}
.headerHome {
  position: absolute;
  left: -135px;
  top: 16px;
}
.home-logo {
  height: 60px;
  // color: #fff;
  display: flex;
  align-items: center;

  img {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    justify-content: flex-start;
    margin-left: 5px;
  }

  .home-logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 10px;

    :first-child {
      margin-bottom: 5px;
    }

    p {
      margin: 0;
      padding: 0;
      font-size: 12px;
    }
  }
}
.home-search {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 10px 0;

  .el-input {
    width: 90%;

    .el-input__inner {
      background: #374850;
      border: 1px solid #374850;
      color: #fff;
      // input::-webkit-input-placeholder{color:#fff;}
    }
  }
}
</style>
<style lang="less" scoped>
.header {
  width: 100%;
  height: 50px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;

  // border-bottom: 1px solid #eee;
  padding-left: 0;
  //   border-bottom: 1px solid #eee;
  box-shadow: 0 0 0 2px #eee;

  .header-nav {
    position: fixed;
    left: 250px;
  }
}
.nav {
  position: relative;
  z-index: 99;
}
.el-menu-vertical-demo {
  min-height: 888px;
  // height: 100%;
}
.el-dropdown {
  position: absolute;
  right: 1%;
  top: 0.5%;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;

  img {
    width: 35px;
    height: 35px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 5px 5px #eee;
  }
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
